<template>
  <div class="weui-panel">
    <!-- <Weui-search-bar @search="search"></Weui-search-bar> -->
    <div class="weui-tab">
      <div class="weui-navbar">
        <a class="weui-navbar__item" v-for="(item) in navBarItems"
          :key="item.name" :class="{'weui-bar__item--on': recordType === item.query}"  @click="activeChanged(item)">
            {{item.name}}
        </a>
      </div>
      <div class="weui-tab__bd">
        <div class="weui-tab__bd-item weui-tab__bd-item--active" ref="list">
          <div class="weui-cell weui-flex list-title">
            <div class="weui-flex__item" v-for="(t, index) in listTitle" :key="index">{{t}}</div>
          </div>

          <div class="weui-cell weui-flex" v-for="(member, index) in listData" :key="index">
            <div class="weui-flex__item">
              <img class="list-user-img" :src="member.headUrl" alt="">
            </div>
            <div class="weui-flex__item">
              <p class="nickname-text">{{member.nickname}}</p>
              <p>{{member.lftid}}</p>
            </div>
            <!-- <div class="weui-flex__item">
              <span class="diamonds-number">{{member.totalCount}}</span>
            </div> -->
             <div class="weui-flex__item">
              <!-- <p>{{member.level | agentLevel}}</p> -->
              <p>
                <!-- member.level === '3' && user.role === 1 -->
                <span>{{member.level | agentLevel}}</span>
                <a class="weui-btn weui-btn_mini weui-btn_default" v-if="member.level === '3' && user.role === 1" @click="changeLevel(member)">提升为一级代理</a>
              </p>
            </div>
          </div>

          <div class="no-data" v-show="!listData.length && !loading">暂无数据</div>

          <div class="weui-loadmore" v-show="loading">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WeuiSearchBar from '../components/WeuiSearchBar'
import { mapState } from 'Vuex'
export default {
  data() {
    return {
      // '总销售',
      listTitle: ['头像', '昵称/ID',  '代理等级'],
      navBarItems: [{name: '平级', query: 4}, {name: '直属一级', query: 1}, {name: '直属二级', query: 2}, {name: '间接二级', query: 3}],
      // listData: [{level: '3'}],
      listData: [],
      loading: false,
      offset: 0,
      limit: 50,
      noMore: false,
      searchText: '',
      recordType: 4,
      hideBP: true
    }
  },
  props: {
  },
  mounted() {
    let role = sessionStorage.getItem('userRole')
    if(role != '总代理'){
      this.navBarItems = [{name: '平级', query: 4}, {name: '直属二级', query: 2}]
    }
    this.hideBP = window.hideBP
    // this.fakeData()
    this.getListData()
    this.initInfinite()
  },
  methods: {
    toTwoFifth(val) {
      if(this.hideBP) {
        return val;
      } else {
        return Math.ceil(val * 2 / 5);
      }
    },
    fakeData() {
      this.listData = [{level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}]
    },
    changeLevel(member) {
      $.confirm({
        title: '提升代理',
        text: `提升${member.nickname}(${member.lftid})为一级代理?`,
        onOK: () => {
          this.api.myTeam.upgradeAgent(member.lftid).then(res => res.json()).then(data => {
            this.getListData()
            this.initInfinite()
            $.alert({
              title: data.message
            })
          })
        }
      })
    },
    initInfinite() {
      const listHeight = document.body.offsetHeight - 104 + 'px'
      Object.assign(this.$refs.list.style, { height: listHeight, 'overflow-y': 'auto' })
      $(this.$refs.list).infinite().on('infinite', () => {
        if (this.loading) {
          return
        }
        this.offset += this.limit
        console.log(this.offset);
        this.getListData()
      });
    },
    activeChanged(item) {
      console.log(item);
      this.recordType = item.query
      this.offset = 0
      if (this.noMore) {
        this.initInfinite()
        this.noMore = false
      }
      this.listData.length = 0
      this.offset = 0
      this.limit = 50
      this.searchText = ''
      this.getListData()
    },
    search(text) {
      console.log(text);
      this.searchText = text
      if (this.noMore) {
        this.initInfinite()
        this.noMore = false
      }
      this.listData = []
      this.offset = 0
      this.limit = 300
      this.getListData()
    },
    getListData() {
      const send = {token: this.token, areaCode: this.areaCode, recordType: this.recordType, offset: this.offset, limit: this.limit, lftid: this.searchText}
      console.log('send', send);
      this.loading = true
      this.api.myTeam.getSellHistory(send).then(res => res.json()).then(data => {
        console.log('myTeam,getSellHistory', data);
        this.loading = false
        if (data.errorCode) {
          $(this.$refs.list).destroyInfinite()
          return
        }
        if (data.source) {
          this.noMore = data.source.length === 0
        } else {
          this.noMore = true
        }

        if (this.noMore) {
          $(this.$refs.list).destroyInfinite()
        }
        this.listData = this.listData.concat(data.source)
      })
    }
  },
  computed: {
    ...mapState(['source', 'api', 'token', 'areaCode', 'user'])
  },
  components: {
    WeuiSearchBar
  }
}

</script>

<style lang="less">
</style>